<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<!--
				需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
				需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
				自定义指令总结：
						一、定义语法：
									(1).局部指令：
												new Vue({															new Vue({
													directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
												}) 																		})
									(2).全局指令：
													Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

						二、配置对象中常用的3个回调：
									(1).bind：指令与元素成功绑定时调用。
									(2).inserted：指令所在元素被插入页面时调用。
									(3).update：指令所在模板结构被重新解析时调用。

						三、备注：
									1.指令定义时不加v-，但使用时要加v-；
									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
		-->

<div id="root">

    <h2>当前的n值是：<span v-text="n"></span></h2>

    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<!--    <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>-->

    <button @click="n++">点击+1</button>

    <input type="text" v-fbind:value="n">
</div>
<div id="root2">

    <h2>当前的n值是：<span v-text="n"></span></h2>

    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>

    <button @click="n++">点击+1</button>

    <input type="text" v-fbind:value="n">
</div>
</body>

<script>

    Vue.config.productionTip = false

    //定义全局指令
    /*Vue.directive('big',function (element,binding) {

        element.innerText = binding.value * 10

        console.log('big',this)
    })*/
    Vue.directive('fbind',{
        //指令和元素成功绑定时调用
        bind(element,binding) {
            console.log('fbind bind',this) // 此处的this是window

            element.value = binding.value
        },
        //指令所在元素被插入时
        inserted(element,binding) {
            console.log('inserted',this)
            element.focus()

        },
        //指令所在的模板被重新解析时
        update(element,binding) {
            console.log('update',this)
            element.value = binding.value
        }
    })
    new Vue({
        el: '#root2',
        data: {
            n: 1
        }
    })
    new Vue({
        el:'#root',
        data:{
            n: 1
        },
        methods:{

        },
        //局部指令
        directives: {
            //big函数何时会被调用？1、指令和元素成功绑定时（首次） 2、指令所在模板被重新解析时（更新）
            /*'big-number' (element,binding){
                element.innerText = binding.value * 10
            },*/
            big (element,binding){
                // console.log('big big')

                // console.log(element instanceof HTMLElement)

                // console.log(binding)

                element.innerText = binding.value * 10

                console.log('big',this)
            },
            /*fbind(element,binding) {

                element.value = binding.value
                element.focus() //指令和元素成功绑定时，input标签还未生成，所以无法获取焦点
            }*/

            fbind: {
                //指令和元素成功绑定时调用
                bind(element,binding) {
                    console.log('fbind bind',this) // 此处的this是window

                    element.value = binding.value
                },
                //指令所在元素被插入时
                inserted(element,binding) {
                    console.log('inserted',this)
                    element.focus()

                },
                //指令所在的模板被重新解析时
                update(element,binding) {
                    console.log('update',this)
                    element.value = binding.value
                }
            }
        }
    })
</script>
</html>